import React, { Component } from 'react';
import { Calendar } from 'antd-mobile';
import "./OrderProgress.scss"
const now = new Date();
class InstallServe extends Component {
	originbodyScrollY = document.getElementsByTagName('body')[0].style.overflowY;
	constructor() {
		super()
		this.state = {
			show: false,
			config: {
				type: 'one'
			},
		}
	}
	onSelectHasDisableDate = (dates) => {
		console.warn('onSelectHasDisableDate', dates);
	}

	onConfirm = (startTime, endTime) => {
		document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
		this.setState({
			show: false,
			startTime,
			endTime,
		});
	}

  onCancel = () => {
    document.getElementsByTagName('body')[0].style.overflowY = this.originbodyScrollY;
    this.setState({
      show: false,
      startTime: undefined,
      endTime: undefined,
    });
  }
  componentDidMount() {
    document.getElementsByTagName('title')[0].innerHTML = '安装服务'
  }
  render() {
    let height = window.screen.height
    return (
      <div className="other-page OrderProgress" style={{minHeight: height + 'px'}}>
        <div className="topbar flex y-center space-between">
          <span className="flex y-center">
            <span>待安装</span>
            <img src={require('../../images/switch.png')} alt="" className="ml10"/>
          </span>
          <span className="flex y-center">
            <span>2018-05-18</span>
            <img src={require('../../images/calendar.png')} 
                 alt="" 
                 className="ml20"
                 onClick={() => {
                  document.getElementsByTagName('body')[0].style.overflowY = 'hidden';
                  this.setState({
                    show: true
                  });
                }}/>
          </span>
        </div>
        <div className="card card2 pb18">
          <div className="flex space-between row y-center">
            <span>安装净水器</span>
            <span className="small-white-but">派单</span>
          </div>
          <div className="border-b mt8"></div>
        </div>
				<div className="foot-btn">查看订单中心</div>

				<Calendar
					{...this.state.config}
					visible={this.state.show}
					onCancel={this.onCancel}
					onConfirm={this.onConfirm}
					onSelectHasDisableDate={this.onSelectHasDisableDate}
					getDateExtra={this.getDateExtra}
					defaultDate={now}
					minDate={new Date(+now - 5184000000)}
					maxDate={new Date(+now + 31536000000)}
				/>
			</div>
		);
	}
}

export default InstallServe;